<template>
    <div class="nav-bar">
        <div class="header"></div>
        <div class="menu-nav">
            <router-link to="/home">我的主页</router-link>
            <router-link to="/home">查询服务</router-link>
            <router-link to="/home">转账服务</router-link>
            <router-link to="/home">交易审核</router-link>
            <router-link to="/home">代发服务</router-link>
            <router-link to="/home">财富管理</router-link>
            <router-link to="/home">余额对账</router-link>
            <router-link to="/home">商业汇票</router-link>
            <router-link to="/home">财务专区</router-link>
        </div>
    </div>
</template>

<style lang="less" scoped>
.menu-nav {
    display: flex; // 导航水平排列
    justify-content: space-around; // 平均分布
    align-items: center; // 垂直居中
    background-color: #f8f9fa; // 导航背景色
    padding: 10px 20px; // 内边距

    a {
        text-decoration: none; // 去掉下划线
        color: #333; // 默认文字颜色
        font-size: 16px; // 文字大小
        font-weight: bold; // 加粗
        padding: 8px 15px; // 内边距让点击区域更大
        border-radius: 5px; // 圆角效果
        transition: all 0.3s ease; // 动画效果

        &:hover {
            color: #fff; // 悬停时文字颜色
            background-color: #007bff; // 悬停时背景色
            transform: scale(1.1); // 放大效果
        }
    }
}
</style>
